<!--创建时间：2021/11/11 16:22 描述： -->
<template>
  <div class="index-class">
    <div>
      <el-button type="primary" @click.stop="addTable">添加表</el-button>
      <el-button type="success" @click.stop="getList">更新列表</el-button>
    </div>
    <ZhiXinTable
      :head="tableHead"
      :data="list"
      class="table"
    >
      <template #toolbar="{row}">
        <el-button @click.stop="editRow(row)" type="text">编辑</el-button>
        <el-button @click.stop="delRow(row)" type="text">删除</el-button>
      </template>
    </ZhiXinTable>
  </div>
</template>
<!--使用ts写vue，这里的语言要修改为ts，其他的位置没有改变，写tsx语言就改成tsx-->
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { TableHeadItem } from '@/components/EditDataTable/DataType/Config'
import { PageLinkDir } from '@/config/PageConfig'
import FileController from '@/controller/file-controller'
interface rowItem{
  name:string
}
/* 这个装饰器里面写引入的组件和生命周期函数，当然，生命周期函数也是可以写在class类里面 */
@Component({
  components: { }
})
/* 这里定义的class一定要继承vue，记不住就直接模仿，class名就是之前的name属性值 */
export default class DataSheetIndex extends Vue {
  private list:rowItem[] = []

  created() {
    this.getList()
  }

  getList() {
    FileController.getFileList().then(res => {
      const data = res.data as string[]
      this.list = data?.map(i => {
        return {
          name: i
        }
      }) || []
    })
  }

  private tableHead: TableHeadItem<rowItem>[] = [
    {
      label: '表名',
      prop: 'name'
    }
  ]

  private editRow(row: rowItem): void {
    this.$router.push({
      path: '/dataSheet/form',
      query: {
        name: row.name,
        dir: PageLinkDir.EDIT
      }
    })
  }

  private addTable(): void {
    this.$router.push({
      path: '/dataSheet/form',
      query: {
        dir: PageLinkDir.EDIT
      }
    })
  }

  delRow(row: rowItem) {
    this.$deleteTip().then(() => {
      FileController.delFile({
        name: row.name
      })
    })
  }
}
</script>
<!--本地样式-->
<style scoped lang="scss">
.index-class{
  margin-top: 16px;
  .table{
    margin-top: 16px;
  }
}
</style>
<!--全局样式-->
<style lang="scss">
</style>
